<template>
	<div class="view">
		<div class="header">
			<div class="h_exit" @click="toIndex">
				<i class="i-exit i-20 i-mr-10"></i>
				<div class="h_str">返回上一页</div>
			</div>
			<div class="h_con">
				<div class="h_li" :class="{'active':li_num==1}" @mouseenter="enter(1)" @mouseleave="leave"
					@click="li_click(1)">管理员列表</div>
				<div class="h_li" :class="{'active':li_num==2}" @mouseenter="enter(2)" @mouseleave="leave"
					@click="li_click(2)">角色列表</div>
				<div class="li_bottom" :style="{left:left+'px'}"></div>
			</div>
		</div>

		<div class="main">
			<div class="main_con" :style="{height:height+'px'}">
				<div class="main_title">角色列表</div>
				<div class="line">
					<el-button icon="el-icon-plus" type="primary" @click="roleAdd" v-if="isRole('roleAdd')">添加角色</el-button>
				</div>
				<div class="item_box">
					<div class="item" v-for="(item,index) in dataList">
						<div class="item_icon">
							<i class="i-c-icon8 i-60 i-mr-10"></i>
						</div>
						<div class="item_detail">
							<div class="item_title">{{item.title}}</div>
							<div class="item_desc">
								<i class="i-c-icon9 i-16 i-mr-6"></i>
								<div class="groupStr">组人数：{{item.count}}</div>
							</div>
						</div>
						<div class="item_btn">
							<el-button type="text" icon="el-icon-edit-outline" class="item_edit" @click="edit(item)" v-if="isRole('roleEdit')">
							</el-button>
							<el-button type="text" icon="el-icon-delete" class="item_remove" @click="remove(item)" v-if="isRole('roleRemove')">
							</el-button>
						</div>
					</div>
				</div>
			</div>
		</div>


	</div>
</template>

<script>
	import {mapGetters,mapState} from "vuex"
	export default {
		data() {
			return {
				height: document.documentElement.clientHeight - 105,
				li_num: 2,
				left: 110,

				dataList: [],
				current: 1,
				limit: 10,
			}

		},
		computed:{
			...mapGetters(['isRole']),
			...mapState(['team'])
		},
		methods: {
			/* 修改 */
			edit(item) {
				this.$store.commit("setUrlParma", item)
				this.$router.push("/role/add");
			},
			// 新增
			roleAdd() {
				this.$store.commit("clearParma")
				this.$router.push('/role/add')
			},
			// 删除
			remove(item) {
				this.$confirm('是否删除此角色?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url:this.$api.roleRemove+item.id
					}).then(res =>{
						if(res.data.code==20000){
							this.$message.success(res.data.message);
							this.dataInit();
						}else{
							this.$message(res.data.message)
						}
					})
				}).catch(() => {
					
				});
			},

			toIndex() {
				this.$router.push('/')
			},
			enter(num) {
				if (num == 1) {
					this.left = 0
				} else {
					this.left = 110
				}
			},

			leave() {
				if (this.li_num == 1) {
					this.left = 0
				} else {
					this.left = 110
				}
			},

			li_click(num) {
				this.li_num = num
				if (num == 1) {
					this.$router.push('/user')
				}
			},

			dataInit() {
				this.$http({
					url: this.$api.roleList,
					method:'post',
					data:{
						current:0,
						limit:0
					}
				}).then(res => {
					if (res.data.code == 20000) {
						this.dataList = res.data.data.list
					}
				})
			},
		},
		created() {
			this.dataInit();
		}
	}
</script>

<style src="../../../assets/css/role.css" scoped>
</style>
